<template>
  <div v-loading="loading">
    <AlertTitle></AlertTitle>
    <div class="items clearfix">
      <div v-for="(d) in da" class="clearfix" :id="d.id" :key="d.id">
        <IsXuanZe :title="d" @par="getVal"></IsXuanZe>
      </div>
    </div>
  </div>
</template>
<script>
import AlertTitle from "./Alert.vue";
import IsXuanZe from "@/components/currency/IsXuanze.vue";
import Sortable from "sortablejs";
export default {
  data () {
    return {
      ti: {
        title1: "验证手机号",
        title2: "关闭后，将不发送短信验证手机号"
      },
      da: [],
      loading: false,
      list: ""
    };
  },
  props: {
    cate: String
  },
  components: {
    AlertTitle,
    IsXuanZe
  },
  methods: {
    getVal (val) {
      //如果要启动代付 需先判断代付有无配置
      if (val.iden == "ye_wxdfjk" || val.iden == "ye_zfbdfjk") {
        // var sign=this.$getSign(val);
        // val.sign=sign;
        val[val.iden] = val.value;
        this.$api.getSettings.checkDf(val).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.setVal(val);
          } else {
            this.$fnc.alertError(res.data.result, res.data.code_desc);
            this.getSettings(this.$route.query.action);
            return false;
          }
        });
      } else {
        console.log(1)
        this.setVal(val);
      }
    },
    setVal (val) {
      if (
        val.iden == "ht_title" ||
        val.iden == "ht_login_logo" ||
        val.iden == "ht_logo"
      ) {
        console.log(11)
        for (var i in this.da) {
          if (val.iden == this.da[i].iden && val.value != this.da[i].value) {
            if (val.iden == "ht_title") {
              document.title = val.value;
            }

          }
        }
      }
      val[val.iden] = val.value;
      this.$api.getSettings.updateSetting(val).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功！");
          if (this.$route.query.action == 'admin') {
            this.$store.dispatch("getHeadInfo");
          }
          //    this.getSettings(this.$route.query.action);
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }

      });
    },
    getSettings (cate) {
      this.loading = true;
      this.da = [];
      if (cate == "" || cate == null) return;
      var data = { cate };
      this.$api.getSettings.getSettingsList(data).then(res => {
        if (res.data.code == 200) {
          if (res.data.result.length <= 0) {
            this.$message.error(
              (this.$store.state.title || this.$store.state.title2) +
              "设置为空！"
            );
            this.da = [];
            return false;
          } else {
            this.da = res.data.result;
          }
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
        this.loading = false;
      });
    },
    rowDrop () {
      const tbody = document.querySelector(".items");
      const _this = this;
      var aa = new Sortable(tbody, {
        group: "", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
        sort: true, // sorting inside list
        delay: 0, // time in milliseconds to define when the sorting should start
        disabled: false, // Disables the sortable if set to true.
        store: null, // @see Store
        animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
        handle: ".items>div .el-col-12", // Drag handle selector within list items
        // filter: ".el-input",  // Selectors that do not lead to dragging (String or Function)
        draggable: ".items>div", // Specifies which items inside the element should be draggable
        chosenClass: "sortable-chosen", // Class name for the chosen item
        dragClass: "sortable-drag", // Class name for the dragging item
        // dataIdAttr: 'data-id',

        forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in

        fallbackClass: false, // Class name for the cloned DOM Element when using forceFallback
        fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
        fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.

        scroll: true, // or HTMLElement
        scrollFn: function (offsetX, offsetY, originalEvent) {
          console.log(11111111)
        }, // if you have custom scrollbar scrollFn may be used for autoscrolling
        scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
        scrollSpeed: 10, // px

        onEnd ({ newIndex, oldIndex }) {
          console.log(newIndex, oldIndex)
          var data = {};
          var sort_str = [];
          const currRow = _this.da.splice(oldIndex, 1);
          _this.da.splice(newIndex, 0, currRow[0]);
          // console.log(_this.da)
          for (var i in _this.da) {
            sort_str.push(_this.da[i].id);
          }
          if (_this.$route.query.action) {
            data.cate = _this.$route.query.action;
          }
          data.sort_str = sort_str.join("@");
          if (data.sort_str) {
            // data.sign=_this.$getSign(data);
            _this.$api.getSettings.sortSettings(data).then(res => {
              console.log(res);
            });
          }
        }
      });
    }
  },
  mounted () {
    var cate = this.$route.query.action;
    this.getSettings(cate);
    this.rowDrop();
  },
  watch: {
    action (val) {
      this.getSettings(val);
    },
    $route () {
      this.getSettings(this.$route.query.action);
    }
  }
};
</script>
